<template>

    <el-header height="80px" class="HeaderBox">
        <el-button type="text" class="language" @click="changelanguage">{{isEN?'EN':'CN'}}</el-button>
        <el-button type="text" class="nav"  @click="to_first_page">首页</el-button>
        <!-- <img class="logo" src="../assets/home/logo.png" /> -->
        
        <el-button type="text" class="nav" @click="to_advanced_search">高级检索</el-button>
        <el-button type="text" class="nav"  @click="to_scholar">学者库</el-button>
        <el-avatar :size="30" :src="circleUrl" @click.native="to_usercenter" class="head_photo" ></el-avatar>
        <el-button v-if="!isLogin" type="text" class="login" @click="to_login" >登录</el-button>
        <!-- <el-button v-else type="text" class="login" @click="logout" >{{this.name}}</el-button> -->
        <el-dropdown v-if="isLogin" class="dropdownn" :hide-on-click="false">
            <span class="el-dropdown-link">
                {{this.name}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="to_usercenter">个人中心</el-dropdown-item>
                <el-dropdown-item @click.native="logout">登出</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <el-badge v-if="notiCount != 0" @click.native="to_usercenterMsg" is-dot class="new">
            <i class="el-icon-bell"></i>
        </el-badge>
        <el-badge v-else @click.native="to_usercenterMsg" class="new">
            <i class="el-icon-bell"></i>
        </el-badge>
    </el-header>

</template>

<script>

    export default {
        name: 'homePage',
        data() {
            return {
                circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                isEN:true,
                isLogin:false,
                name:'',
                notiCount:0,
            };
        },
        methods:{
             to_first_page(){
            this.$router.push("/");
        },
            changelanguage(){
                if(this.isEN){
                    this.isEN=false;
                }
                else
                {
                    this.isEN=true;
                }
            },
            to_advanced_search(){
                this.$router.push("/advsearch");
            },
            to_scholar(){
                this.$router.push("/scholar");
            },
            to_login(){
                this.$router.push("/login");
            },
            to_usercenter() {
                if(this.isLogin) {
                    console.log(this.isLogin);
                    this.$router.push("/usercenter/userinfo");
                }
                else {
                    this.$router.push("/login");
                }
            },
            to_usercenterMsg() {
                if(this.isLogin) {
                    this.$router.push("/usercenter/messagecenter");
                }
                else {
                    this.$router.push("/login");
                }
            },
            logout() {
                console.log("LOGOUT");
                this.$axios({
                    method: "post",
                    url: "/api/logout",
                })
                .then((res) => {
                    console.log(res);
                    if(res.data.errno === 100000) {
                        this.$message.success(res.data.msg);
                        sessionStorage.clear();
                        document.cookie = "",
                        setTimeout(() => {
                            this.isLogin = false;
                            this.$router.push("/");
                            location.reload();
                        }, 500);
                    }
                })
                .catch((err) => {
                    console.log(err);
                })
            },
            getNoti() {
                this.$axios({
                    method: "get",
                    url: "/api/checkNotification",
                })
                .then((res) => {
                    console.log(res);
                    if(res.data.errno === 800001) {
                        this.notiCount = 0;
                        return 0;
                    }
                    this.notiCount = res.data.count;
                })
                .catch((err) => {
                    console.log(err);
                })
            }
        },
        mounted() {
            this.getNoti();
        },
        created() {
          console.log(document.cookie)
            if(document.cookie!="")
            {
              console.log("TRUE");
              this.$axios({
              method: "get",
              url: "/api/getUserMsg",
              
              })
              .then((res) => {
                console.log(res.data);
                if(res.data.errno === 900010) {
                    this.isLogin = true;
                    this.circleUrl='http://120.46.205.87'+res.data.backend_data.thumbnail_url;
                    this.name=res.data.backend_data.username;
                    sessionStorage.setItem('avatar',this.circleUrl);
                }
                else if(res.data.errno === 800001) {
                    this.isLogin = false;
                }
              })
            }
      },
      to_advanced_search(){
          this.$router.push("/advsearch");
      },
      to_scholar(){
          this.$router.push("/scholar");
      },
      to_login(){
          this.$router.push("/login");
      }
}
</script>

<style scoped>
.HeaderBox {
    /* border: 1px solid black; */
    width: 100%;margin:auto;
}
.el-dropdown-link {
    cursor: pointer;
    color: #9d6dff;
}
.el-icon-arrow-down {
    font-size: 12px;
}
.language{
    width:15%;
    margin-top:10px;
    font-size:16px;
    font-weight: bold;
    font-family: Microsoft YaHei,Arial, Helvetica, sans-serif;
    color: rgb(61, 61, 175);
}
.language:active {
  color: rgb(0, 140, 200);
}
.nav {
  width: 7%;
  font-size: 15px;
  font-family: Microsoft YaHei, Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  color: #606266;
}
.nav:active {
  color: rgb(0, 140, 200);
}
.el-icon-bell {
  font-size: 20px;
  font-weight: bold;
  color: #909399;
}
.el-icon-bell:hover {
  cursor: pointer;
  color: rgb(61, 61, 175);
}
.new {
  margin-left: 30px;
  margin-top: 3px;
}
.head_photo {
  position: absolute;
  margin-left: 670px;
  top: 15px;
}
.head_photo:hover{
    cursor: pointer;
}
.login{
    margin-left: 710px;
    font-size: 15px;
    font-family: Microsoft YaHei,Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
    color: #606266;
}
.login:active {
  color: rgb(0, 140, 200);
}
.name {
  margin-left: 710px;
  font-size: 13px;
  font-family: Microsoft YaHei, Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  color: #606266;
}
.name:active {
  color: rgb(0, 140, 200);
}
.pop-menu {
  line-height: 10px;
  border: 0 !important;
}
.pop-menu-item {
  height: 40px !important;
}
.pop-menu-item:hover{
  background-color: #f5f4f4 !important;
  border-radius: 3px;
}
.pop-menu-text {
  text-align: center;
  position: relative;
  bottom: 10px;
}
.dropdownn {
    margin-left: 710px;
}
</style>